<template>
<div class="order-container">
  <van-nav-bar
    left-arrow
    @click-left="gotoleft"
    title="我的订单"
  />
  <div class="order-item" v-for="item in orderList" :key="item.orderId">
    <div class="top">
      <div class="img-box">
        <van-image class="goods-img" :src="item.listPicUrl"></van-image>
      </div>
      <div class="goods-info">
        <div class="goods-name">{{item.goodsName}}</div>
        <div>
          <text class="counts">数量：{{item.number}}</text>
          <text class="points" decode>&nbsp;&nbsp;积分：{{item.retailPrice}}</text>
        </div>
        <div class="date">下单时间：{{item.payTime}}</div>
        <!-- <div class="tip">请留意接听送货电话</div> -->
      </div>
    </div>
    <div class="receiver-info">
        <div class="name">收货人：{{item.consignee}}</div>
        <div class="address">收货地址：{{item.address}}</div>
        <div class="phone">电话：{{item.mobile}}</div>
      </div>
  </div>
</div>
</template>

<script>
import router from '../router'
import {GetOrder} from '@/api'
import {reactive,toRefs} from 'vue'
export default {
  name: 'order',
  setup(props) {
    //参数
    let mine = reactive({
      orderList:[]
    })
    GetOrder().then(res=>{
      console.log('get order==>',res)
      if(res.code===0){
        // this.setData({orderList:res.data.data})
        mine.orderList = res.data
      }
    })
    function gotoleft(){
      router.go(-1)
    }
    //挂载
    return{ ...toRefs(mine),gotoleft}
  }
}
</script>

<style scoped>
page{
  width:100%;
  height: 100%;
}

.order-container{
  width:100%;
  min-height: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
  background-color: #eeeeee;
}

.order-container .order-item:not(:first-of-type){
  margin-top: 20px;
}

.order-item{
  width:85%;
  padding:20px;
  margin:0 auto;
  border-radius: 20px;
  background-color: #ffffff;
  font-size: 26px;
  color: #666666;
}

.order-item .top{
  display: flex;
  align-items: center;
  padding: 0 20px 20px 20px;
  border-bottom:1px solid #e6e6e6;
}

.receiver-info{
  columns: #666666;
}

.order-item .img-box{
  width:170px;
  height: 170px;
  border:1px solid #e6e6e6;
  border-radius: 20px;
}

.order-item .goods-img{
  display: block;
  width:100%;
  height: 100%;
  object-fit: contain;
}

.order-item .goods-info{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20px;
}

.order-item .goods-name{
  color: #000000;
}

.order-item .receiver-info{
  margin-top: 20px;
}

.order-item .address,
.order-item .phone{
  margin-top: 10px;
}
</style>